<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
	<link href="css/panel.css" rel="stylesheet">
	<style>
		body {
			font-family: 'Microsoft Yahei';
			background-color: #CCC;
		}
		body > div {
			margin: 20px;
		}
		.w400 {
			width: 400px;
		}
		.w800 {
			width: 800px;
		}
		.w1200 {
			width: 1200px;
		}
	</style>
</head>
<body>
	<!-- 父级 400px 宽 -->
	<div class="w400">
		<div class="panel">
			<div class="panel-head">
				<h2 class="panel-head-title">
					这里是标题
					<small>这里是小标题</small>
					<a href="#" class="more">
						更多链接
					</a>
				</h2>
			</div>
			<div class="panel-body">
				<ul class="topic-list">
					<li>
						<a href="#">
							<div>
								<img src="img/01.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/02.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/03.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/04.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<!-- 父级 800px 宽 -->
	<div class="w800">
		<div class="panel">
			<div class="panel-head">
				<ul class="panel-head-tabs">
					<li class="tab active">
						<a href="javascript:;">最新文章</a>
					</li>
					<li class="tab">
						<a href="javascript:;">产品设计</a>
					</li>
					<li class="tab">
						<a href="javascript:;">创业分享</a>
					</li>
					<li class="tab">
						<a href="javascript:;">行业动态</a>
					</li>
					<li class="tab">
						<a href="javascript:;">用户体验</a>
					</li>
				</ul>
			</div>
			<div class="panel-body">
				<ul class="topic-list">
					<li>
						<a href="#">
							<div>
								<img src="img/01.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/02.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/03.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/04.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
				</ul>
			</div>
			<div class="panel-head">
				<h2 class="panel-head-title">
					这里是标题
					<small>我是第二个 ^_^</small>
					<a href="#" class="more">
						更多链接
					</a>
				</h2>
			</div>
			<div class="panel-body">
				<ul class="topic-list">
					<li>
						<a href="#">
							<div>
								<img src="img/01.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/02.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/03.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/04.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<!-- 父级 1200px 宽 -->
	<div class="w1200">
		<div class="panel">
			<div class="panel-head">
				<h2 class="panel-head-title">
					这里是标题
					<small>父级多宽我多宽 ^_^</small>
					<a href="#" class="more">
						更多链接
					</a>
				</h2>
			</div>
			<div class="panel-body">
				<ul class="topic-list">
					<li>
						<a href="#">
							<div>
								<img src="img/01.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/02.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/03.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/04.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
				</ul>
			</div>
			<div class="panel-head">
				<ul class="panel-head-tabs">
					<li class="tab">
						<a href="javascript:;">最新文章</a>
					</li>
					<li class="tab">
						<a href="javascript:;">产品设计</a>
					</li>
					<li class="tab active">
						<a href="javascript:;">创业分享</a>
					</li>
					<li class="tab">
						<a href="javascript:;">行业动态</a>
					</li>
					<li class="tab">
						<a href="javascript:;">用户体验</a>
					</li>
				</ul>
			</div>
			<div class="panel-body">
				<ul class="topic-list">
					<li>
						<a href="#">
							<div>
								<img src="img/01.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/02.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/03.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/04.jpg" alt="">
							</div>
							<span>图片介绍</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>